<template>
  <view class="unregister-container">
    <navbar title="注销账号"></navbar>
    <text class="tips">点击“确认注销”表示您自愿放弃账号内全部数据以及资产权益（包括VIP），确定需要注销。</text>
    <view class="custom-btn primary" @click="toUnregister">确认注销</view>
    <text class="tips">如果有账号及VIP权益疑问请联系客服。</text>
    <view class="custom-btn" @click="showKefu">咨询客服</view>
  </view>
</template>

<script>
import appConfig from '@/appConfig'
import {
  commonApi
} from '@/api.js'
import {
  mapActions,
  mapGetters
} from 'vuex'
import navbar from '@/components/navbar'

export default {
  components: {
    navbar
  },
  data() {
    return {
      top: 0,
      bottom: 150,
      url: ''
    }
  },
  computed: {
    ...mapGetters(['systemInfo', 'settings'])
  },
  onLoad() {

  },
  methods: {
    ...mapActions(['checkLogined', 'unregister']),

    toBack() {
      uni.navigateBack()
    },
    showKefu() {
      uni.showModal({
        title: '微信联系客服：' + this.settings.kefuPhone,
        content: '早上09:00-晚上21:00',
        confirmText: '复制微信',
        showCancel: false,
        success: () => {
          uni.setClipboardData({
            showToast: true,
            data: this.settings.kefuPhone
          })
        }
      })
    },
    async toUnregister() {
      uni.showLoading({
        title: '加载中...',
        mask: true
      })

      try {
        await this.unregister()
        await this.checkLogined()
        uni.showToast({
          title: '注销成功，原账户无法再登录！',
          icon: 'none',
          duration: 2000
        });

        uni.reLaunch({
          url: '/pages/home/home'
        })
      } catch (e) {
        console.log(e)
      }
      uni.hideLoading()
    }
  }
}
</script>

<style lang="scss">
page {
  height: 100%;
}

.unregister-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;


  .tips {
    color: #333;
    text-align: center;
    line-height: 2em;
    font-size: 16px;
    margin: 0 32rpx;
  }

  .custom-btn {
    margin: 0 46upx;
    margin-top: 32rpx;
    background-color: #fff;
    border: 1px solid #000;
    &.primary {
      background-color: #3073f6;
      color: #fff;
      margin-bottom: 50rpx;
      border: none;
    }
  }
}
</style>
